<template>
  <div>
    <div>用户管理页面</div>
    <div style="margin: 8px 0; display: flex;">
      <a-input-search
        placeholder="请输入用户姓名"
        enter-button="搜 索"
        size="large"
        @search="onSearch"
        style="width: 500px;margin-right: 50px;"
      />
      <a-button
        type="primary"
        @click="handleAdd"
        :disabled="disabledFlag"
        style="width: 100px;height: 40px;"
      >
        添加用户
      </a-button>
    </div>

    <a-table :columns="columns" :data-source="data" bordered>
      <template
        v-for="col in ['name', 'gender', 'age', 'phone', 'mail', 'address']"
        :slot="col"
        slot-scope="text, record"
      >
        <div :key="col">
          <a-input
            type="text"
            :value="text"
            v-if="record.flag"
            @change="handleChange($event, col, record)"
          />
          <div v-else>{{ text }}</div>
        </div>
      </template>
      <template slot="operation" slot-scope="record">
        <div
          style="display: flex; justify-content: space-around; width:150px"
          v-if="!record.flag"
        >
          <a-button
            type="primary"
            @click="modifyRecord(record)"
            :disabled="disabledFlag"
          >
            修改
          </a-button>
          <a-button
            type="danger"
            @click="removeRecord(record)"
            :disabled="disabledFlag"
            >删除</a-button
          >
        </div>
        <div
          style="display: flex; justify-content: space-around; width:150px"
          v-else
        >
          <a-button
            type="primary"
            @click="saveRecord(record)"
            v-if="!record.cancel"
          >
            保存
          </a-button>
          <a-button type="primary" @click="addRecord(record)" v-else
            >添加</a-button
          >
          <a-button type="danger" @click="recoverRecord" v-if="!record.cancel">
            重置
          </a-button>
          <a-button type="danger" @click="recoverRecord" v-else>取消</a-button>
        </div>
      </template>
    </a-table>
  </div>
</template>

<script>
import { SYS_GET_USER_INFO, httpGet } from "../../api/api";
let key=require('./help');
const columns = [
  {
    title: "姓名",
    dataIndex: "name",
    width: "10%",
    scopedSlots: { customRender: "name" }
  },
  {
    title: "性别",
    dataIndex: "gender",
    width: "10%",
    scopedSlots: { customRender: "gender" }
  },
  {
    title: "年龄",
    dataIndex: "age",
    width: "10%",
    scopedSlots: { customRender: "age" }
  },
  {
    title: "电话",
    dataIndex: "phone",
    width: "15%",
    scopedSlots: { customRender: "phone" }
  },
  {
    title: "邮箱",
    dataIndex: "mail",
    width: "15%",
    scopedSlots: { customRender: "mail" }
  },
  {
    title: "住址",
    dataIndex: "address",
    width: "20%",
    scopedSlots: { customRender: "address" }
  },
  {
    title: "操作",
    scopedSlots: { customRender: "operation" }
  }
];
export default {
  name: "UserManager",
  data() {
    return {
      data: [],
      columns: columns,
      disabledFlag: false,
      disableAdd: false
    };
  },
  methods: {
    async getUserInfo() {
      const { data } = await httpGet(SYS_GET_USER_INFO, null);
      this.data = data;
    },
    modifyRecord(record) {
      const newData = [...this.data];
      newData.forEach((item, index, arr) => {
        if (record.key === item.key) {
          arr[index].flag = true;
        }
      });
      this.data = newData;
      this.disabledFlag = true;
    },
    saveRecord(record) {
      record.flag = false;
      httpGet(
        SYS_GET_USER_INFO +
          "?" +
          "info=" +
          JSON.stringify(record) +
          "&action=save"
      );
      this.getUserInfo();
      this.disabledFlag = false;
    },
    addRecord(record) {
      record.cancel = false;
      record.flag = false;
      httpGet(
        SYS_GET_USER_INFO +
          "?" +
          "info=" +
          JSON.stringify(record) +
          "&action=add"
      );
      this.getUserInfo();
      this.disabledFlag = false;
    },
    recoverRecord() {
      this.getUserInfo();
      this.disabledFlag = false;
    },
    removeRecord(record) {
      httpGet(
        SYS_GET_USER_INFO +
          "?" +
          "info=" +
          JSON.stringify(record) +
          "&action=delete"
      );
      const newData = [...this.data];
      const index = newData.indexOf(record);
      newData.splice(index, 1);
      this.data = newData;
    },
    handleChange(e, col, record) {
      record[col] = e.target.value;
    },
    handleAdd() {
      const newData = [...this.data];
      ++key;
      const record = {
        key: key,
        name: "",
        gender: "",
        age: "",
        phone: "",
        mail: "",
        address: "",
        flag: "true",
        cancel: "true"
      };
      newData.push(record);
      this.data = newData;
      this.disabledFlag = true;
    },
    // value 是文本框里的文本字符串
    async onSearch(value){
      const res=await httpGet(
        SYS_GET_USER_INFO +
        "?" +
        "info=" +
        value +
        "&action=search"
      );
      this.data = res;
    }
  },
  created() {
    this.getUserInfo();
  }
};
</script>

<style scoped>
/deep/.ant-btn-lg{
  width: 80px !important;
}
th.column-money,
td.column-money {
  text-align: right !important;
}
</style>
